<template>
  <div class="appointment-detail-container">
    <!-- 标题区域 -->
    <div class="header">
      <h2>预约明细</h2>
    </div>

    <!-- 基本信息区域 -->
    <div class="info-section">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="医生姓名">{{ baseInfo.doctorName }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">
         {{ baseInfo.scheduleDate}}:{{ baseInfo.timePeriod}}
        </el-descriptions-item>
        <el-descriptions-item label="已约名额">{{ baseInfo.registeredCount }}人</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 操作区域 -->
    <div class="action-section">
      <h3>预约明细</h3>
      <el-button type="primary" @click="exportData">导出数据</el-button>
      <el-button
          type="primary"
          size="small"
          @click="handleBack"
          style="margin-left: auto">
        返回列表
      </el-button>
    </div>

    <!-- 明细表格区域 -->
    <div class="detail-section">
      <el-table :data="detailData" border style="width: 100%">
        <el-table-column prop="doctorName" label="预约人" width="120" />
        <el-table-column prop="department" label="科室" width="180" >
          <template #default="{ row }">
            {{ row.departmentName }}
          </template>
        </el-table-column>
        <el-table-column prop="fee" label="挂号费用" width="120"/>
        <el-table-column prop="startTime" label="挂号时间" width="180" />
      </el-table>
    </div>
    <!-- 分页插件 ========================================== =============================== -->
    <div class="demo-pagination-block">
      <!--
                  1. current-page  ： 当前页   （重要）
                  2. page-size  : 每页显示条数（重要）
                  3. page-sizes ： 分页类型
                  4. small： 字体大小
                  5. disabled： 是否可用
                  6. background： 按钮颜色
                  7. total： 总数据条数（重要）

          -->
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 3, 4, 5]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
    </div>
    <!-- 分页插件 ========================================== =============================== -->

  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios"
import {router} from "@/router/index.js";

import {useRoute} from "vue-router";

const route = useRoute()
// 分页模型定义=======================================================================
let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getDetailData();
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  getDetailData();
}
// 分页模型定义=======================================================================

// 明细数据
const detailData = ref([])
const getDetailData =() => {
  axios.get(`/doctorSchedule/getDoctorDetail/${pageNum.value}/${pageSize.value}`).then(res=>{
    detailData.value = res.data.obj.data;
    total.value = res.data.obj.total
  })
}



const baseInfo = ref({})
const getAppointmentDetail = () => {
  console.log("======================================"+route.params.id)
  axios.get(`/doctorSchedule/getAppointmentDetail/${route.params.id}`).then(res => {
    baseInfo.value = res.data.obj
  })
}

// 导出数据
const exportData = () => {
  location.href = "http://localhost:8080/doctorSchedule/download"
}

const handleBack=()=>{
  router.push('/appointmentQuery')
}

onMounted(() => {
  getAppointmentDetail();
  getDetailData();
})
</script>

<style scoped>
.appointment-detail-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.info-section {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-section h3 {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.detail-section {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  margin-top: 10px;
}
</style>